<template>
    <view class="policy pl-30 pr-30 pt-30 mt-24">
        <view class="ft-40 t-3 bold">政策与服务</view>
        <!-- 取消政策 -->
        <view class="policy-item">
            <view class="align-center policy-item-top">
                <view class="policy-item-img">
                    <hj-image
                        :isLoad="false"
                        src="icons-22.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="c-m flex-auto ft-32 bold">限时取消</view>
            </view>
            <view class="ft-28 t-3 policy-item-text">
                入住当天{{
                    formatDate(hotelPolicy.freeCancelHours, '20:00')
                }}前可免费取消。若未入住或超过入住当天{{
                    formatDate(hotelPolicy.freeCancelHours, '20:00')
                }}取消需联系前台客服咨询。订单需等酒店确认后生效，订单确认结果以短信通知或者电话联系为准，如果订单不确认将全额退款至您的付款账户。
            </view>
        </view>
        <!-- 确认政策 -->
        <view class="policy-item">
            <view class="align-center policy-item-top">
                <view class="policy-item-img">
                    <hj-image
                        :isLoad="false"
                        src="icons-24.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="c-m flex-auto ft-32 bold">快速确认</view>
            </view>
            <view class="ft-28 t-3 policy-item-text"> 预定此房型后可快速确认订单。 </view>
        </view>
        <!-- 入住规则 -->
        <view class="policy-item">
            <view class="align-center policy-item-top">
                <view class="policy-item-img">
                    <hj-image
                        :isLoad="false"
                        src="icons-30.png"
                        :height="iconSize"
                        :width="iconSize"
                        mode="aspectFit"
                    />
                </view>
                <view class="t-3 flex-auto ft-32 bold">入住规则</view>
            </view>
            <view class="ft-28 t-3 policy-item-text">
                办理入住时，携带所有入住人的有效身份证办理入住，入住必须按照一人一证。请在{{
                    formatDate(hotelPolicy.checkInTime, '14:00')
                }}之后入住，在退房日期的{{
                    formatDate(hotelPolicy.checkOutTime, '13:00')
                }}之前退房；{{
                    formatDate(hotelPolicy.checkInTime, '14:00')
                }}前到店可能需要等房，如果提前入住或延时退房，请咨询前台客服。
            </view>
        </view>
        <block v-if="showMore">
            <!-- 宠物携带 -->
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img">
                        <hj-image
                            :isLoad="false"
                            src="icons-31.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="t-3 flex-auto ft-32 bold">宠物携带</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">
                    {{ hotelPolicy.isAllowPets ? '可携带宠物' : '不可携带宠物' }}
                </view>
            </view>
            <!-- 在线付 -->
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img">
                        <hj-image
                            :isLoad="false"
                            src="icons-28.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="t-3 flex-auto ft-32 bold">在线付</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">房费需提前支付，可使用微信进行付款。</view>
            </view>
            <!-- 押金 -->
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img">
                        <hj-image
                            :isLoad="false"
                            src="icons-29.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="t-3 flex-auto ft-32 bold">押金</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">
                    {{
                        hotelPolicy.isDeposit
                            ? '入住需要押金，具体费用以前台收取为准'
                            : '不收取押金'
                    }}
                </view>
            </view>
            <!-- 开票 -->
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img">
                        <hj-image
                            :isLoad="false"
                            src="icons-25.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="t-3 flex-auto ft-32 bold">开具发票</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">
                    支持普通发票，可在订单完成后在订单页开具，也可咨询前台开具发票。
                </view>
            </view>
            <!-- 婴儿及加床 -->
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img">
                        <hj-image
                            :isLoad="false"
                            src="icons-27.png"
                            :height="iconSize"
                            :width="iconSize"
                            mode="aspectFit"
                        />
                    </view>
                    <view class="t-3 flex-auto ft-32 bold">婴儿及加床</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">
                    {{
                        hotelPolicy.isAllowChildren
                            ? '该房型欢迎携带儿童入住'
                            : '该房型不能携带儿童入住'
                    }}
                </view>
            </view>
            <view class="policy-item">
                <view class="align-center policy-item-top">
                    <view class="policy-item-img"> </view>
                    <view class="t-3 flex-auto ft-32 bold">婴儿床及加床政策</view>
                </view>
                <view class="ft-28 t-3 policy-item-text">
                    <text>
                        {{ hotelPolicy.isExtraBed ? '该房型提供加床' : '该房型不提供加床' }}
                    </text>
                    <text>、不提供婴儿床</text>
                    <text v-if="hotelPolicy.isAllowChildren"> ，儿童与成人共用现有床铺 </text>
                    <text>。</text>
                </view>
            </view>
        </block>
        <view class="more center pb-24 ft-26 t-6 pt-20" @click="showMore = !showMore">
            <text class="mr-8">{{ showMore ? '收起' : '更多政策与服务' }}</text>
            <hj-image
                :isLoad="false"
                :src="showMore ? 'icons-20.png' : 'icons-19.png'"
                height="26rpx"
                width="26rpx"
                mode="aspectFit"
            />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 房间设施
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'PolicyService'
})
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    }
})

const hotelPolicy = computed(() => props.info.hotelPolicy || {}) //酒店政策

// 图标大小
const iconSize = ref('36rpx')
// 是否显示更多设施
const showMore = ref(false)

// 时间格式处理
const formatDate = (date, defaultDate) => {
    if (!date) {
        return defaultDate
    }
    try {
        const today = dayjs().format('YYYY-MM-DD')
        return dayjs(`${today} ${date}`).format('HH:mm')
    } catch (e) {
        console.error('时间格式转换失败:', e)
        return defaultDate
    }
}
</script>

<style scoped lang="scss">
.policy {
    background: $uni-bg-color;
    position: relative;
    z-index: 30;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.02);
    border-radius: 30rpx;
    &-item {
        &-img {
            width: 50rpx;
        }
        &-text {
            padding-left: 50rpx;
        }
        &-top {
            margin: 24rpx 0 8rpx;
        }
    }
}
</style>
